<template>
	<div>
		<div class="head">
			<div class="hedaer-list">
				<span @click="curId=0" :class="{'act':curId===0}">影院</span>
				<span @click="curId=1" :class="{'act':curId===1}">院线</span>
				<span @click="curId=2" :class="{'act':curId===2}">影投</span>
			</div>
		</div>
		<div class="content">
			<div v-show="curId===0">
				<div class="nav">
					<div class="block">
						日期:
						<el-date-picker v-model="value1" type="date" placeholder="选择日期" class="date">
						</el-date-picker>
					</div>
					<div class="block">
						地区：
						<el-cascader :options="options" :props="{ checkStrictly: true }" clearable></el-cascader>
					</div>
					<div class="block">
						公司：
						<el-cascader :options="options" :props="{ checkStrictly: true }" clearable></el-cascader>
					</div>
				</div>
				<div class="new">
					<span>影院信息</span>
				</div>
				<div class="na">
					<span>影院名称：</span><input type="text" placeholder="请输入影院关键字" @click="open">
				</div>
				<div class="xin">
					<span>影院新旧:</span>
					<ul>
						<li class="du">全部</li>
						<li @click="open">新影城</li>
						<li @click="open">次新影城</li>
						<li @click="open">老影城</li>
					</ul>
				</div>
				<div class="xin">
					<span>特殊银幕:</span>
					<ul class="da">
						<li class="du">全部</li>
						<li @click="open">全部巨幕</li>
						<li @click="open">IMAX</li>
						<li @click="open">中国巨幕</li>
						<li @click="open">杜比全景声</li>
						<li @click="open">4DX</li>
						<li @click="open">ScreenX</li>
						<li @click="open">CINITY</li>
					</ul>
				</div>
				<div class="di">
					<span>票房体量:</span>
					<ul>
						<li class="du">全部</li>
						<li @click="open">3000万以上</li>
						<li @click="open">1000-3000万</li>
						<li @click="open">500-1000万</li>
						<li @click="open">500万以下</li>
					</ul>
				</div>
				<div class="new">
					<span>影院信息</span>
				</div>
				<div> <span>选择影片：</span> <input type="text" @click="open" placeholder="请输入影片名称" /></div>
				<div class="zhu"><span>主类型：</span>
					<el-checkbox-group v-model="checkList">
						<el-checkbox @click="open" label="爱情"></el-checkbox>
						<el-checkbox @click="open" label="动画"></el-checkbox>
						<el-checkbox @click="open" label="动作"></el-checkbox>
						<el-checkbox @click="open" label="剧情"></el-checkbox>
						<el-checkbox @click="open" label="科幻"></el-checkbox>
						<el-checkbox @click="open" label="喜剧"></el-checkbox>
						<el-checkbox @click="open" label="战争"></el-checkbox>
						<el-checkbox @click="open" label="惊悚"></el-checkbox>
						<el-checkbox @click="open" label="奇幻"></el-checkbox>
						<el-checkbox @click="open" label="灾难"></el-checkbox>
						<el-checkbox @click="open" label="纪录片"></el-checkbox>
						<el-checkbox @click="open" label="艺术片"></el-checkbox>
					</el-checkbox-group>
				</div>
				<div class="xin"><span>影片属性：</span>
					<ul>
						<li class="du">全部</li>
						<li @click="open">国产</li>
						<li @click="open">进口</li>

					</ul>
				</div>
				<div class="conte">
					<div class="one">
						影院票房
					</div>
					<!-- v-for="(item,index) in pro.table0" :key="index" -->
					<div class="ta">
						<el-table :data="pro.table1" height="600px" border style="width: 100%">
							<el-table-column fixed prop="Irank" label="排名">
							</el-table-column>
							<el-table-column fixed prop="CinemaName" label="影院名称" width="180" class="zi">
							</el-table-column>
							<el-table-column fixed prop="BoxOffice" label="票房(万)">
							</el-table-column>
							<el-table-column prop="CityName" label="省份">
							</el-table-column>
							<el-table-column prop="ShowCount" label="场次">
							</el-table-column>
							<el-table-column prop="AudienceCount" label="人次(万)">
							</el-table-column>
							<el-table-column prop="AvgBoxOffice" label="平均票价">
							</el-table-column>
							<el-table-column prop="ShowDay" label="天数">
							</el-table-column>
							<el-table-column prop="AvgShowAudienceCount" label="场均人次">
							</el-table-column>
						</el-table>
					</div>
					<div class="blockk">
						<el-pagination @current-change="handleCurrentChange" layout="prev, pager, next"
							:total="current*10">
						</el-pagination>
					</div>

				</div>
			</div>
			<div v-show="curId===1">
				<div class="nav">
					<div class="block">
						日期:
						<el-date-picker v-model="value1" type="date" placeholder="选择日期" class="date">
						</el-date-picker>
					</div>
					<div class="block">
						地区：
						<el-cascader :options="options" :props="{ checkStrictly: true }" clearable>
						</el-cascader>
					</div>
				</div>
				<div class="conte">
					<div class="one">
						票房详情
					</div>
					<!-- v-for="(item,index) in pro.table0" :key="index" -->
					<div class="ta">
						<el-table :data="yx.table1" height="800px" border style="width: 100%">
							<el-table-column fixed prop="Irank" label="排名">
							</el-table-column>
							<el-table-column fixed prop="CinemaLineName" label="院线名" width="180" class="zi">
							</el-table-column>
							<el-table-column prop="BoxOffice" label="当前票房(万)">
							</el-table-column>
							<el-table-column prop="ShowCount" label="当前场次">
							</el-table-column>
							<el-table-column prop="AudienceCount" label="当前人次(万)">
							</el-table-column>
							<el-table-column prop="AvgBoxOffice" label="平均票价">
							</el-table-column>
							<el-table-column prop="AvgShowAudienceCount" label="场均人次">
							</el-table-column>
						</el-table>
					</div>
				</div>
			</div>
			<div v-show="curId===2">
				<div class="content">
					<div class="nav">
						<div class="block">
							日期:
							<el-date-picker v-model="value1" type="date" placeholder="选择日期" class="date">
							</el-date-picker>
						</div>
						<div class="block">
							地区：
							<el-cascader :options="options" :props="{ checkStrictly: true }" clearable>
							</el-cascader>
						</div>
						<div class="block">
							公司：
							<el-cascader :options="options" :props="{ checkStrictly: true }" clearable>
							</el-cascader>
						</div>
					</div>
					<div class="conte">
						<div class="one">
							票房详情
						</div>
						<!-- v-for="(item,index) in pro.table0" :key="index" -->
						<div class="ta">
							<el-table :data="yt.table1" height="800px" border style="width: 100%">
								<el-table-column fixed prop="Irank" label="票房排行">
								</el-table-column>
								<el-table-column fixed prop="CompanyName" label="影投公司" width="180" class="zi">
								</el-table-column>
								<el-table-column prop="CinemaCount" label="影院数">
								</el-table-column>
								<el-table-column prop="BoxOffice" label="当前票房(万)">
								</el-table-column>
								<el-table-column prop="AvgBoxOffice" label="平均票价">
								</el-table-column>
								<el-table-column prop="ShowCount" label="当前场次">
								</el-table-column>
								<el-table-column prop="AudienceCount" label="当前人次(万)">
								</el-table-column>
								<el-table-column prop="AvgShowAudienceCount" label="场均人次">
								</el-table-column>
							</el-table>
						</div>
						<div class="blockk">
							<el-pagination @current-change="handleCurrentChanges" layout="prev, pager, next"
								:total="curren*10">
							</el-pagination>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		GetYypf,
		GetYt,
		GetYx
	} from '@/api/yypf.js'
	export default {
		data() {
			return {
				pageindex: 1,
				current: 0,
				curren: 0,
				pageSize: 20,
				pro: {},
				yt: {},
				yx: {},
				checkList: [],
				loading: true,
				curId: 0,
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				},
				value1: '',
				value2: '',
				options: [{
					value: 'zhinan',
					label: '按票仓',
					children: [{
							value: 'yi',
							label: '一线城市',
						}, {
							value: 'er',
							label: '二线城市',
						},
						{
							value: 'san',
							label: '三线城市',
						},
						{
							value: 'si',
							label: '四线城市',
						},
						{
							value: 'wu',
							label: '五线城市',
						}
					]
				}, {
					value: 'zujian',
					label: '按大区',
					children: [{
						value: 'basic',
						label: '华北地区',
					}, {
						value: 'form',
						label: '东北地区',
					}, {
						value: 'data',
						label: '华东地区',
					}, {
						value: 'notice',
						label: '中南地区',
					}, {
						value: 'navigation',
						label: '西南地区',
					}, {
						value: 'others',
						label: '西北地区',
					}]
				}, ]
			};
		},
		created() {
			GetYypf({
					r: 0.5675148920061657,
					bserviceprice: 0,
					datetype: ' Day',
					date: '2022-08-18',
					sdate: '2022-08-18',
					edate: '2022-08-18',
					citylevel: '',
					lineid: '',
					columnslist: '100,101,102,121,122,103,104,108,123,109',
					pageindex: this.pageindex,
					pagesize: 20,
					order: 102,
					ordertype: 'desc',
				})
				.then(res => {
					this.pro = res.data.data;
					this.current = this.pro.table2[0].TotalPage
					console.log("=======", this.pro.table2[0].TotalPage);
					console.log('this.pro', this.pro)
				}),

				GetYt({
					r: 0.48894946885543455,
					bserviceprice: 0,
					datetype: ' Day',
					date: '2022-08-19',
					sdate: '2022-08-19',
					edate: '2022-08-19',
					citylevel: '',
					lineid: '',
					columnslist: '101,121,116,102,108,103,104,109',
					pageindex: this.pageindex,
					pagesize: 20,
					order: 102,
					ordertype: 'desc',
				})
				.then(res => {
					this.yt = res.data.data;
					// console.log(this.pro);
					this.curren = this.yt.table2[0].TotalPage
					// console.log("=======", this.yt.table2[0].TotalPage);
					// console.log('this.yt', this.yt)
				}),

				// 院线
				GetYx({
					r: 0.40051956924226273,
					bserviceprice: 0,
					datetype: ' Day',
					date: '2022-08-19',
					sdate: '2022-08-19',
					edate: '2022-08-19',
					citylevel: '',
					lineid: '',
					columnslist: '101,114,102,103,104,108,109',
					pageindex: 1,
					pagesize: 20,
					order: 102,
					ordertype: 'desc',
				})
				.then(res => {
					this.yx = res.data.data;
					console.log("this.yx", this.yx)
				})

		},
		methods: {
			handleCurrentChange(page) {
				console.log('--------------------------' + page);
				GetYypf({
						r: 0.5675148920061657,
						bserviceprice: 0,
						datetype: ' Day',
						date: '2022-08-18',
						sdate: '2022-08-18',
						edate: '2022-08-18',
						citylevel: '',
						lineid: '',
						columnslist: '100,101,102,121,122,103,104,108,123,109',
						pageindex: page,
						pagesize: 20,
						order: 102,
						ordertype: 'desc',
					})
					.then(res => {
						this.pro = res.data.data;
						// console.log('this.pro', this.pro)
					})
			},
			handleCurrentChanges(page) {
				console.log('--------------------------' + page);
				GetYt({
						r: 0.48894946885543455,
						bserviceprice: 0,
						datetype: ' Day',
						date: '2022-08-18',
						sdate: '2022-08-18',
						edate: '2022-08-18',
						citylevel: '',
						lineid: '',
						columnslist: '101,121,116,102,108,103,104,109',
						pageindex: page,
						pagesize: 20,
						order: 102,
						ordertype: 'desc',
					})
					.then(res => {
						this.yt = res.data.data;
						// console.log('this.yt', this.yt)
					})
			},


			open() {
				const h = this.$createElement;
				this.$msgbox({
					title: '功能使用受限',
					message: h('p', "该功能仅限于vip会员及以上会员使用,您当前为免费会员。建议您选择升级会员，体验完整功能", [
						h('span', ''),
						h('i', {
							style: 'color: red'
						}, 'VNode')
					]),
					showCancelButton: true,
					confirmButtonText: '前往升级',
					cancelButtonText: '我知道了，暂不升级',
					beforeClose: (action, instance, done) => {
						if (action === 'confirm') {
							instance.confirmButtonLoading = true;
							instance.confirmButtonText = '升级中';
							setTimeout(() => {
								done();
								setTimeout(() => {
									instance.confirmButtonLoading = false;
								}, 300);
							}, 3000);
						} else {
							done();
						}
					}
				}).then(() => {
					this.$message({
						type: 'info',
						message: 'VIP会员,699/月'
					});
				});
			},
		}
	}
</script>

<style>
	.act {
		background-color: #7030a0;
		color: #7030a0;
		background-color: aliceblue;
		border-top: 3px solid #7030a0;

	}

	.el-input__icon {
		line-height: 30px;
	}

	.el-input__inner {
		height: 30px;
		line-height: 30px;
	}

	.blockk {
		padding-left: 300px;
	}

	ul li {
		list-style: none;
	}

	input {
		height: 20px;
	}

	/deep/ .el-checkbox {
		font-size: 14px;
	}

	.head span {
		display: inline-block;
		width: 88px;
		height: 40px;
		line-height: 40px;
		text-align: center;
	}

	.nav {
		display: flex;
	}

	.block {
		padding: 5px;
	}

	.new {
		font-weight: 800;
		padding: 5px;
	}

	.xin,
	.di {
		display: flex;
	}

	.xin span,
	.da span,
	.di span {
		margin-top: 13px;
	}

	.xin ul,
	.da ul,
	.di ul {
		display: flex;
	}

	.di li {
		width: 120px;
		text-align: center;
	}

	.di .du {
		width: 60px;
		background-color: #7030a0;
		color: #fff;
	}

	.xin li {
		width: 80px;
		/* height: 20px; */
		line-height: 20px;
		text-align: center;
	}

	.xin .du {
		width: 60px;
		background-color: #7030a0;
		color: #fff;
	}

	.one {
		padding: 5px;
		border-left: 3px solid #7030a0;
		font-weight: 800;
	}

	.zhu {
		display: flex;
		padding: 5px;
	}

	.kk span {
		width: 10px;
		padding: 50px 43px 0 30px;
	}
</style>
